<template>
    <div class="video-wrapper">
        <div class="box" v-if="!isLiveEnd">
            <video ref="video" :poster="cover" webkit-playsinline="" playsinline="" x-webkit-airplay="" x5-playsinline="" id="aly-video" class="video-js vjs-big-play-centered" controls>
                <source v-if="isLive" :src="source" type="application/x-mpegURL">
                <source v-else :src="currentSource">
            </video>
            <div class="flow-tips" v-show="tip && !(!isReady || hasError)">
                <div class="container">
                    <p class="desc">建议使用WIFI网络观看直播</p>
                    <div class="flowPlay" @click="hideTip">使用流量播放</div>
                </div>
            </div>
            <div class="flow-tips" v-show="!isReady || hasError">
                <div class="container">
                    <p class="desc">视频正在准备中 请稍后再试</p>
                </div>
            </div>
        </div>
        <div v-else class="live-end-wrapper">
            <img class="logo" src="@/assets/images/play-icon.png" alt="">
            <div class="text">直播已结束，请刷新查看回放。</div>
        </div>
    </div>
</template>

<script>
    import api from '../api'
    import { getNetworkType } from '../utils'

    export default {
        name: 'videoPlayer',
        props: {
            videoId: {
                type: String,
                default: ''
            },
            liveId: {
                type: String,
                default: ''
            },
            status: { // 1 预告中 2 直播中 3 直播结束
                type: String,
                default: '3'
            },
            vods: {
                type: Array,
                default: () => []
            },
            cover: {
                type: String
            }
        },
        data() {
            return {
                visible: true,
                isLive: false,
                source: '',
                tip: false,
                videoList: [],
                currentVideoIndex: 0,
                isLiveEnd: false,
                isReady: true, // 回放视频经阿里云处理完
                hasError: false
            }
        },
        mounted() {
            this.initAlyVideo(this.videoId)
        },
        beforeDestroy() {
            this.player.dispose()
        },
        methods: {
            async ended() {
                if (this.vods.length - 1 === this.currentVideoIndex) {
                    return
                }

                let nextIndex = this.currentVideoIndex + 1

                await api.getPlayVideoUrl(this.vods[nextIndex].playId).then((res) => {
                    var data = res.data || {}
                    this.videoList.push(data)
                })

                this.currentVideoIndex++
                this.player.src({ src: this.currentSource })
                this.$nextTick(() => {
                    this.play()
                })
            },
            async initAlyVideo(videorId) {
                const components = []
                const playId = 'aly-video'

                let isLive = false
                if (this.status == '2') {
                    isLive = true
                }
                this.isLive = isLive

                const isCellular = this.getCellular()

                if (isLive) {
                    api.getLivePlayUrl(this.liveId)
                        .then((res) => {
                            var data = res.data || {}

                            this.source = data.m3u8 ? data.m3u8 : data.fileUrl
                            
                            this.tip = isCellular

                            this.$nextTick(() => {
                                setTimeout(() => {
                                    this.player = videojs('aly-video')
                                    isCellular && (document.querySelector('.vjs-big-play-button').style.display = 'none')
                                    this.player.on('error', (err) => {
                                        console.log('err', err)
                                        this.hasError = true
                                    })

                                    // this.player.on('waiting', () => {
                                    //     this.timer = setTimeout(() => {
                                    //         console.log('网络不佳或直播已结束')
                                    //     }, 1000 * 10)
                                    // })
                                    // this.player.on('playing', () => {
                                    //     clearTimeout(this.timer)
                                    // })
                                    // this.player.on('pause', () => {
                                    //     clearTimeout(this.timer)
                                    // })
                                }, 100)
                            })
                        })

                    return
                }

                if (this.vods && this.vods.length > 0) {
                    await api.getPlayVideoUrl(this.vods[0].playId).then((res) => {
                        var data = res.data || {}
                        this.videoList.push(data)
                    })
                    this.tip = isCellular
                } else {
                    this.isReady = false
                }

                this.$nextTick(() => {
                    setTimeout(() => {
                        this.player = videojs('aly-video')
                        isCellular && (document.querySelector('.vjs-big-play-button').style.display = 'none')
                        this.player.on('ended', this.ended)
                    }, 200)
                })
            },
            getCellular() {
                const connectData = getNetworkType()
                return (connectData.typeText === 'cellular' || connectData.type !== 'wifi') && connectData.type !== 'unknown'
            },
            pause() {
                this.player && this.player.pause()
            },
            play() {
                this.player && this.player.play()
            },
            hide() {
                this.pause()
                this.visible = false
            },
            show() {
                this.visible = true
            },
            hideTip() {
                this.tip = false
                this.play()
            }
        },
        computed: {
            currentSource() {
                if (this.videoList.length === 0) return ''

                return this.videoList[this.currentVideoIndex].fileUrl
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .video-wrapper
        height rem(467)
        position relative
        .box
            width 100%
            height 100%
        .video-js
            width 100%
            height 100%
        >>> .flow-tips
            height 100%
            position absolute
            top 0
            left 0
            right 0
            bottom 0
            background: rgba(0, 0, 0, 0.5)
            z-index: 6
            // background-color: #000
            background-repeat: no-repeat
            background-position: center
            background-size: contain
            .container
                display flex
                height 100%
                flex-direction column
                align-items center
                justify-content center
                .desc
                    color #ffffff
                    font-size rem(26)
                .flowPlay
                    width rem(228)
                    height rem(60)
                    border-radius rem(6)
                    border rem(2) solid #FFD100
                    color #FFD100
                    font-size rem(28)
                    display flex
                    justify-content center
                    align-items center
                    margin-top rem(46)
        >>> .prism-time-display
            margin-top: rem(8) !important
            margin-left: rem(40) !important
        >>> .prism-player .prism-fullscreen-btn
            margin-top 13px !important
        >>> .prism-play-btn
            margin-top 12px !important
        // >>> .vjs-big-play-centered .vjs-big-play-button
        //     display none

        .live-end-wrapper
            display flex
            flex-direction column
            align-items center
            justify-content center
            height 100%
            background-color #000
            .logo
                width rem(140)
                height rem(146)
            .text
                color #FFD100
                font-size rem(28) 
</style>